//表单验证
var input = document.getElementById('form-phone');
var p = document.getElementById('form-p');
var patt = /^[a-zA-Z0-9-_]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
var bool = false;
input.onfocus = function () {
    p.innerHTML = "请输入正确的邮箱";
}
input.onblur = function () {
    if (patt.test(this.value)) {
        p.innerHTML = "";
    }
    else {
        p.innerHTML = "<span>邮箱格式不正确</span>";
    }
}

var button = document.getElementsByClassName('submit')[0];
button.onmouseover = function () {
    if ((patt.test(input.value)) && bool) {
        console.log(bool, button);
        button.setAttribute('type', 'submit');
    }
}
button.onmoseout = function () {
    button.setAttribute('type', 'button');
}

//显示下一个页面
var sub1 = document.getElementsByClassName('sub1')[0];
var sub2 = document.getElementsByClassName('sub2')[0];
var sub3 = document.getElementsByClassName('sub3')[0];
button.onclick = function () {
    console.log(button.getAttribute('type'));
    if (button.getAttribute('type') == "submit") {
        sub1.style.display = "none";
        sub2.style.display = "block";
    }
}

//滑块
var external = document.getElementsByClassName('external')[0];
var bg = document.getElementsByClassName('bg')[0];
var sliding = document.getElementsByClassName('sliding')[0];
var textSpan = document.getElementsByClassName('word')[0];
var width = parseInt(external.offsetWidth);
main();

function main() {
    sliding.addEventListener("mousedown", onslidingmousedown);
}
function onslidingmousedown() {
    external.addEventListener("mousemove", onexternalmousemove);
    document.addEventListener("mouseup", ondocumentmoseup);
}
function onexternalmousemove() {
    x = parseInt(event.pageX) - parseInt(external.offsetLeft);
    //console.log(bg);
    bg.style.width = x + 'px';
    sliding.style.left = x + 'px';
    if (x >= 400) {
        bg.style.width = 400 + 'px';
        sliding.style.left = 400 + 'px';
        iffalse();
    }
}
function ondocumentmoseup() {
    var left = parseFloat(sliding.style.left);
    var b = left / 100;
    var a = setInterval(function () {
        left -= b;
        console.log(left);
        sliding.style.left = left + 'px';
        bg.style.width = left + 'px';
        if (left <= 0) {
            clearInterval(a);
            sliding.style.left = 0 + 'px';
            bg.style.width = 0 + 'px';
        }
    }, 10)
    external.removeEventListener("mousemove", onexternalmousemove);
    document.removeEventListener("mouseup", ondocumentmoseup);
}
function iffalse() {
    textSpan.innerText = "验证成功";
    bool = true;
    external.removeEventListener("mousemove", onexternalmousemove);
    document.removeEventListener("mouseup", ondocumentmoseup);
    sliding.removeEventListener("mousedown", onslidingmousedown);
}


//表单验证1
window.onload = function () {
    var bool1 = false;
    var bool2 = false;
    var formphone = document.getElementById('form-name');
    var p1 = document.getElementById('form-account')
    var patt1 = /[^\x00-xff]/g;
    formphone.onfocus = function () {
        p1.innerHTML = "2-8个字符，可以包含数字，字母与汉字";
    }
    formphone.onblur = function () {
        var patt = /[^\w\u4e00-\u9fa5]/ig;
        var str = this.value;
        var long = str.replace(patt1, "x").length;
        if (long < 2 || long > 10) {
            p1.innerHTML = "<span>用户名字数不正确</span>";
        }
        else {
            if (patt.test(this.value)) {
                p1.innerHTML = "<span>含有非法字符</span>";
            }
            else {
                p1.innerHTML = "";
                bool1 = true;
            }
        }

    }


    var onepass = document.getElementById('onepass');
    var p2 = document.getElementById('form-powone');
    onepass.onfocus = function () {
        p2.innerHTML = "9-20个字符，可以包括数字，字母和下划线";
    }
    onepass.onblur = function () {
        var patt2 = /[^\w]/ig;
        var patt3 = /(?!^\d+$)(?!^[A-Za-z]+$)(?!^_+$)^\w{6,16}$/;
        var long = this.value.length;
        console.log(long);
        if (long < 8 || long > 20) {
            p2.innerHTML = "<span>密码字数不正确</span>";
        }
        else {
            if (patt2.test(this.value)) {
                p2.innerHTML = "<span>含有非法字符</span>";
            }
            else if (!patt3.test(this.value)) {
                p2.innerHTML = "<span>密码未至少包含数字，字母与下划线中的两种</span>";
            }
            else {
                p2.innerHTML = "";
                bool2 = true;
            }
        }
    }


    var twopass = document.getElementById('twopass');
    var p3 = document.getElementById('form-powtwo');
    twopass.onfocus = function () {
        p3.innerHTML = "请再次输入密码";
    }
    twopass.onblur = function () {
        if (onepass.value == twopass.value) {
            p3.innerHTML = "";
        }
        else {
            p3.innerHTML = "<span>两次输入密码不一致</span>";
        }
    }

    var button1 = document.getElementsByTagName('button')[1];
    button1.onmouseover = function () {
        if (onepass.value == twopass.value && onepass.value != "" && bool1 && bool2) {
            button1.setAttribute('type', 'submit')
        }

    }
    button1.onmouseout = function () {
        if (onepass.value == twopass.value && onepass.value != "" && bool1 && bool2) {
            button1.setAttribute('type', 'button')
        }
    }


    //显示下一个页面
    button1.onclick = function () {
        console.log(button1.getAttribute('type'));
        if (button1.getAttribute('type') == "submit") {
            sub1.style.display = "none";
            sub2.style.display = "none";
            sub3.style.display = "block";
        }
    }
}